// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
$.ajax({
  url: "/my/article/cates",
  success: function (res) {
    // 3.2 获取成功 - 模板引擎渲染下拉框
    var optList = template("tpl-opt", res); //res={status: ,message:'',data:[]}
    $("select").append(optList);
    // 3.3 更新渲染 - 动态插入的表单元素 layUI form模块自动渲染失效
    form.render("select");
    $.ajax({
      url: "/my/article/" + id,
      success: function (res) {
        form.val("editor-form", res.data);
        initEditor();
        $image
          .cropper("destroy")
          .attr("src", "http://ajax.frontend.itheima.net" + res.data.cover_img)
          .cropper(options);
      },
    });
  },
});

// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------

// *********************** 1.初始化富文本编辑器

// *********************** 2.裁剪图片区域
// 2.1 实现基本效果
// 2.1.1 初始化图片裁剪器
var $image = $("#image");
// 2.1.2 裁剪选项
var options = {
  aspectRatio: 400 / 280,
  preview: ".img-preview",
};
// 2.1.3 初始化裁剪区域
$image.cropper(options);

// *********************** 3.分类列表下拉框
let form = layui.form;
// 3.1 调用获取分类接口

// *********************** 4.实现点击上传图片
// 4.1 上传图片功能 - 点击button按钮 ,触发文件域
// 4.1.1 绑定点击按钮事件
$('button:contains("选择封面")').on("click", function () {
  // 4.1.2 触发文件域
  $("input[type=file]").trigger("click");
});
// 4.2 更换图片功能
// 4.2.1 绑定文件域change事件
$("input[type=file]").on("change", function () {
  // 4.2.2 获取文件对象
  // console.log($(this));
  // let fileObj = $(this)[0].files[0]; //$(this)[0]是把JQ对象转换为JS对象,简写为this
  let fileObj = this.files[0];
  console.log(fileObj);
  // 4.2.3 创建临时URL
  let fileURL = URL.createObjectURL(fileObj);
  // 4.2.4 更换图片 - 移除剪裁区→设置新图片路径→初始化剪裁区
  $image.cropper("destroy").attr("src", fileURL).cropper(options);
});

// *********************** 5.实现发布文章功能
// 5.1 绑定表单 提交事件
$("form").on("submit", function (e) {
  // 5.2 阻止表单的默认提交行为
  e.preventDefault();
  // 5.3 通过FormData获取表单数据 - 根据name属性
  let fd = new FormData(this);
  // 检验获取的数据
  //fd.forEach((val,key)=>{console.log(key,val);}) //有content但是值为空 图片数据需要转为二进制数据

  // 5.4 更改文章内容数据
  // 5.4.1 获取文章内容数据 - 用了富文本插件不能直接获取到(百度)
  let newContent = tinyMCE.activeEditor.getContent();
  // 5.4.2 更改fd中的数据
  fd.set("content", newContent);
  // 再次检验获取的数据
  //fd.forEach((val,key)=>{console.log(key,val);}) //content有值了

  // 5.5 添加封面图片数据
  // 5.5.1 创建画布
  let canvas = $image.cropper("getCroppedCanvas", {
    width: 400,
    height: 280,
  });
  // 5.5.2 把画布内容转换为	blob二进制文件
  // 异步方法(所以把ajax请求嵌套在里边)
  canvas.toBlob(function (bl) {
    //转换后的操作 ,参数代表转换后的数据
    // 5.5.3 向fd中追加
    fd.append("cover_img", bl);
    // 再次检验获取的数据
    //fd.forEach((val,key)=>{console.log(key,val);})//有图片数据了

    //5.6 调用发表文章接口
    $.ajax({
      type: "POST",
      url: "/my/article/add",
      data: fd,
      // 5.6.1 使用FormData数据时必添
      processData: false,
      contentType: false,
      success: function (res) {
        // 5.6.2 layui提示框
        layer.msg(res.message);
        // 5.6.3 成功时跳转到文章列表页面
        if (res.status == 0) {
          location.href = "/article/article.html";
        }
      },
    });
  });
});
